<template>
  <div class="home-box">
    <div class="header-box">
      <div class="header-left">
        <div class="logo-box">
          <!-- <img src="@/assets/logo.png" alt="" /> -->
          <div class="logo-text">网上购物商城系统</div>
        </div>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item
            v-for="item in menuList"
            :key="item.name"
            :index="item.name"
            >{{ item.title }}</el-menu-item
          >
        </el-menu>
      </div>
      <div class="header-right">
        <el-button v-if="!token" type="primary" size="small" @click="register()"
          >登录&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;注册</el-button
        >
        <Navbar v-if="token" class="navbar"></Navbar>
      </div>
    </div>
    <div class="body-box">
      <component :is="activeIndex"></component>
    </div>
  </div>
</template>

<script>
import NoticeIndex from "./components/notice.vue";

import Navbar from "@/layout/components/Navbar";
import { mapGetters } from "vuex";
//新加
import ProductIndex from "./components/productIndex.vue"
import CartIndex from "@/views/home/components/CartIndex/index.vue"
import OrderIndex from "./components/OrderIndex/index.vue"
import FavoriteIndex from "./components/FavoriteIndex/index.vue"
import AddressIndex from "./components/AddressIndex/addressIndex.vue" 
import MoneyIndex from "./components/money.vue"
export default {
  name: "HomeIndex",
  components: {
    NoticeIndex,
   
    Navbar,
    //新加
    ProductIndex,
    CartIndex,
    OrderIndex,
    FavoriteIndex,
    AddressIndex,
    MoneyIndex
  },
 
  data() {
    return {
      menuList: [
        // {
        //   name: "NoticeIndex",
        //   title: "首页公告",
        // },
        // {
        //   name: "CategoryIndex",
        //   title: "分类",
        // },
        // {
        //   name: "RankIndex",
        //   title: "排行",
        // },
        // {
        //   name: "NovalIndex",
        //   title: "书城",
        // },
        // {
        //   name: "BookstoreIndex",
        //   title: "书架",
        // },
         {
          name: "ProductIndex",
          title: "商品",
        },
         {
          name: "CartIndex",
          title: "购物车",
        },
         {
          name: "OrderIndex",
          title: "订单",
        },
         {
          name: "FavoriteIndex",
          title: "收藏",
        },
         {
          name: "AddressIndex",
          title: "收货地址",
        },
         {
          name: "MoneyIndex",
          title: "充值",
        },
      ],
      activeIndex: "ProductIndex", //默认商品
    };
  },
  watch: {
   
  },
  computed: { ...mapGetters(["name", "role", "token"]) },
  created() {},
  mounted() {
    if(this.$route.query.activeComIndex){
      this.activeIndex = this.$route.query.activeComIndex
    }
  },
  methods: {
    handleSelect(key) {
      this.activeIndex = key;
    },
    register() {
      this.$router.push({ name: "login" });
    },
  },
};
</script>
<style lang="scss" scoped>
.home-box {
  width: 100%;
  height: 100%;
  background-color: fff;
  .header-box {
    width: 100%;
    padding: 0 80px;
    background-color: rgb(84, 92, 100);
    position: fixed;
    top: 0;
    z-index: 2;
    color: #333;
    font-size: 16px;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    height: 64px;
    .header-left {
      margin-right: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .logo-box {
        width: 230px;
        height: 40px;
        margin-right: 40px;
        img {
          width: 100%;
          height: 100%;
        }
        .logo-text {
          color: #fff;
          font-size: 18px;
          font-weight: bold;
          line-height: 40px;
          text-align: center;
          text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
        }
      }
    }
    .header-right {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 100%;
    }
    .navbar {
      margin-left: 20px;
      ::v-deep .hamburger-container {
        display: none;
      }
    }
  }
  .body-box {
    padding-top: 64px;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: #f1f1f1;
  }
}
</style>
